<template>
  <div>
     <el-form :model="compForm" :rules="compRule" size="mini" ref="form" label-width="auto">
            <el-row :gutter="20">
                <el-col :span="20">
                    <el-form-item label="发货方：" prop="orShipper" v-if="desc">
                      <el-select clearable v-model="compForm.orShipper" :disabled="view==='1'" @change="changeContactSend" style="width:100%" filterable  allow-create>
                        <el-option v-for="(item,index) in send" :key="index" :label="item.orShipper" :value="item.orShipper"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="收货方：" prop="orReveivingparty" v-else>
                      <el-select clearable v-model="compForm.orReveivingparty"  :disabled="view==='1'" @change="changeContactReceive" style="width:100%" filterable allow-create>
                        <el-option v-for="(item,index) in accept" :key="index" :label="item.orReveivingparty" :value="item.orReveivingparty"></el-option>
                      </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="20">
                    <el-form-item label="联系人：" prop="lxr">
                      <el-input clearable v-model="compForm.lxr"  :disabled="view==='1'" style="width:100%">
                      </el-input>
                    </el-form-item>
                </el-col>
                 </el-row>
                <el-row :gutter="20">
                 <el-col :span="20">
                    <el-form-item label="联系电话：" prop="lxdh">
                      <el-input clearable v-model="compForm.lxdh"  :disabled="view==='1'" maxlength="11" style="width:100%">
                      </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
             <el-row :gutter="20">
               <el-col :span="20" v-if="desc">
                    <el-form-item label="装车时间段：" prop="adcSSwrkdate" >
                        <el-time-select
                        clearable
                        placeholder="开始时间"
                        v-model="compForm.adcSSwrkdate"
                        style="width:45%"
                         :disabled="view==='1'"
                        :picker-options="{
                          start: '00:00',
                          step: '00:01',
                          end: '23:59'
                        }"
                        editable
                        >
                      </el-time-select>
                      <div class="holdline">&emsp;—&emsp;</div>
                      <el-time-select
                        clearable
                        placeholder="结束时间"
                        style="width:45%"
                         :disabled="view==='1'"
                        v-model="compForm.adcSEwrkdate"
                        :picker-options="{
                        start: '00:00',
                          step: '00:01',
                          end: '23:59'
                        }"
                        editable
                        >
                      </el-time-select>
                      </el-form-item>
                      </el-col>
                    <el-col :span="20" v-else>
                    <el-form-item label="卸车时间段：" prop="adcDSfinwrkdate" >
                        <el-time-select
                         clearable
                        placeholder="开始时间"
                        v-model="compForm.adcDSfinwrkdate"
                        style="width:45%"
                         :disabled="view==='1'"
                        :picker-options="{
                          start: '00:00',
                          step: '00:01',
                          end: '23:59'
                        }"
                        editable
                        >
                      </el-time-select>
                      <div class="holdline">&emsp;—&emsp;</div>
                      <el-time-select
                       clearable
                        placeholder="结束时间"
                        style="width:45%"
                        v-model="compForm.adcDEfinwrkdate"
                         :disabled="view==='1'"
                        :picker-options="{
                        start: '00:00',
                          step: '00:01',
                          end: '23:59'
                        }"
                        editable
                        >
                      </el-time-select>
                    </el-form-item>
                      </el-col>
                </el-row>
<!--                <el-row>-->
<!--                  <el-form-item label="地址：" prop="district">-->
<!--                    <el-row>-->
<!--                       <el-col :span="6">-->
<!--                        <el-select clearable v-model="compForm.province"  :disabled="view==='1'" @change="getCity" filterable>-->
<!--                          <el-option v-for="(item,index) in province" :key="index" :label="item.prvChnname" :value="item.prvCode"></el-option>-->
<!--                        </el-select>-->
<!--                       </el-col>-->
<!--                       <el-col :span="7">-->
<!--                        <el-select clearable style="width: 90%; margin-left: 5%;" v-model="compForm.city"  :disabled="view==='1'" @change="getDc" filterable>-->
<!--                          <el-option v-for="(item,index) in city" :key="index" :label="item.ctyeChnname" :value="item.ctyeCode"></el-option>-->
<!--                        </el-select>-->
<!--                       </el-col>-->
<!--                       <el-col :span="6">-->
<!--                        <el-select clearable v-model="compForm.district"  :disabled="view==='1'" filterable >-->
<!--                          <el-option v-for="(item,index) in district" :key="index" :label="item.ctyChnname" :value="item.ctyCode"></el-option>-->
<!--                        </el-select>-->
<!--                       </el-col>-->
<!--                    </el-row>-->
<!--                    </el-form-item>-->
<!--                </el-row>-->
                <el-row>
                  <el-form-item label="详细地址：" prop="xxdz">
                       <el-col :span="19">
                        <el-input clearable v-model="compForm.xxdz" @change="getLongWei" :disabled="view==='1'" maxlength="128">
                        </el-input>
                       </el-col>
                    </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="经纬度：" prop="jd">
                       <el-col :span="8">
                        <el-input clearable style="width: 95%;" v-model="compForm.jd"  :disabled="view==='1'">
                        </el-input>
                       </el-col>
                       <el-col :span="8">
                        <el-input clearable style="width: 95%;" v-model="compForm.wd"  :disabled="view==='1'">
                        </el-input>
                       </el-col>
                       <el-col :span="4">
                        <el-link style="margin-left: 15%;" type="primary" @click="openMap" :underline="false" v-if="view!='1'">地图定位</el-link>
                       </el-col>
                    </el-form-item>
                </el-row>
          </el-form>
           <el-dialog
          title='地图定位'
          width="40%"
          :visible.sync="showMap"
          v-if="showMap"
          :close-on-click-modal="false"
          :append-to-body="true">
          <baidu-map :height="height" @choose="savePot"></baidu-map>
          <div  class="dialog-footer">
          </div>
        </el-dialog>
  </div>
</template>

<script>
import {getProvince,getUrban,getDistrict, getReceiver, getSender} from '@/request/api'
import baiduMap from '@/components/baidumap'
export default {
  props:{
    compForm:{
      type:Object,
      required:true
    },
    desc:{
      type:Boolean,
      required:true
    },
    view:{
      type:String,
      required:true,

    },
    formname:{
      type:String,
      required:true,
    },
    cltId: {
      type: String,
      default: ''
    }

  },
  watch: {
    cltId () {
      this.getSenderOrReceiver()
    },
    compForm:{
      handler(){
        console.log('侦听compForm.xxdz')
      }
    }
  },
  data(){
    return{
      height:200,
      showMap:false,
      compRule:{
        orShipper:[{required:true,message:'请选择发货人',trigger:'blur'}],
        orReveivingparty:[{required:true,message:'请选择收货人',trigger:'blur'}],
        lxr:[{required:true,message:'请输入联系人',trigger:'blur'}],
        lxdh:[{required:true,message:'请输入联系电话',trigger:'blur'}],
        adcSSwrkdate:[{required:true,message:'请选择装车时间段',trigger:'blur'}],
        adcDSfinwrkdate:[{required:true,message:'请选择卸车时间段',trigger:'blur'}],
        district:[{required:true,message:'请选择地址',trigger:'blur'}],
        xxdz:[{required:true,message:'请输入详细地址',trigger:'blur'}]
      },
      send:[],//发货方
      accept:[],//收货方
      province:[],//省
      city:[],//市
      district:[],//区
    }
  },

  components:{baiduMap},
  mounted(){
    this.getSenderOrReceiver()
    getProvince().then(res=>{
      if(res.success==='1'){
        this.province=res.data
      }
    })

    if (this.compForm.province) {
      getUrban({prvCode:this.compForm.province}).then(res=>{
        if(res.success==='1'){
          this.city=res.data
        }
      })
    }

    if (this.compForm.city) {
      getDistrict({ctyeCode:this.compForm.city}).then(res=>{
        if(res.success==='1'){
          this.district=res.data
        }
      })
    }




  },
  methods:{
    getSenderOrReceiver () {
      if (this.desc) {
        getSender(this.cltId).then(res => {
          console.log(res,111111111111)
          this.send = res.data
        })
      } else {
        getReceiver(this.cltId).then(res => {
          console.log(res,111111111111)
          this.accept = res.data
        })
      }
    },
    // 更换发货人
    changeContactSend (name) {
      const sender = this.send.find(item => item.orShipper === name)
      if (sender) {
        this.compForm.lxr = sender.orShippercontacts
        this.compForm.xxdz = sender.adcSAddress
        this.compForm.lxdh = sender.orShippertel
      }
    },
    // 更换收货人
    changeContactReceive (name) {
      const receiver = this.accept.find(item => item.orReveivingparty === name)
      if (receiver) {
        this.compForm.lxr = receiver.orReveivingpartycontacts
        this.compForm.xxdz = receiver.adcDAddress
        this.compForm.lxdh = receiver.orReveivingpartytel
      }
    },
    //获取区
    getDc(name){
      this.district=[]
      this.compForm.district = ''
      if (name) {
        getDistrict({ctyeCode:name}).then(res=>{
          if(res.success==='1'){
            this.district=res.data
          }
        })
      }
    },
    //获取市
    getCity(name){
      this.compForm.city = ''
      this.compForm.district = ''
      this.city=[]
      if (name) {
        getUrban({prvCode:name}).then(res=>{
          if(res.success==='1'){
            this.city=res.data
          }
        })
      }

    },
    //保存坐标
    savePot(res){
      if(res){
        this.compForm.jd=res.point.lng
        this.compForm.wd=res.point.lat
        this.compForm.xxdz=res.address
        // this.compForm.province=res.addressComponents.province
        // this.compForm.city=res.addressComponents.city
        // this.compForm.district=res.addressComponents.district
        this.$confirm('选取坐标成功!', '提示', {
          confirmButtonText: '确定'
        }).then(()=>{
          this.showMap=false
        }).catch(()=>{
          this.compForm.potX=''
          this.compForm.potY=''
        })
      }
    },
    // 验证 模仿 element 的验证方式
    validate (callback) {
      this.$refs.form.validate((valid) => {
        callback(valid)
      })
    },
    //打开地图
    openMap(){
      if(!this.check){
        this.showMap=true
      }
    },
    getLongWei(address) {
      this.$jsonp('https://api.map.baidu.com/geocoding/v3/', {
        address: address,
        output: 'json',
        ak: 'klVHCMMpLMNTWIknViZZOrKKEYVn8OOU'
      }).then(json => {
        console.log(json,'json')
        this.compForm.jd = json.result.location.lng //经度
        this.compForm.wd = json.result.location.lat //纬度
      }).catch(err => {
        console.log(err,'err')
      })
    }

  },


}
</script>

<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.holdline {
  display: inline-block;
  text-align: center;
  width: 10%;
}

</style>

